<template>
  <div>
    <el-form ref="form" :model="hotObj" >
      <el-form-item label="名字" >
        <el-input v-model="hotObj.title"></el-input>
      </el-form-item>
      <el-form-item label="封面图">
        <el-upload
                class="avatar-uploader"
                action="api/fileInfo/uploadFile"
                :show-file-list="false"
                :on-success="handlePicSuccess">
          <img v-if="hotObj.pic" :src="hotObj.pic" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="内容">
        <el-upload
                class="ivu-upload"
                :show-upload-list="false"
                :format="['jpg','jpeg','png','gif']"
                :max-size="2048"
                multiple
                action="api/fileInfo/uploadFile"
                :on-success="handleAvatarSuccess">
          <i  class="ivu-btn"></i>
        </el-upload>
        <quillEditor v-model="hotObj.content" :options ="editorOption"  ref="QuillEditor"></quillEditor>
      </el-form-item>
      <el-form-item label="模块类型">
        <template>
          <el-select v-model="hotObj.type" placeholder="请选择" >
            <el-option
                v-for="(item,index) in cardType"
                :key=index
                :label=item.label
                :value=item.value>
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="是否可用">

        <el-switch
            v-model="hotObj.isView"
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cance">取消</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>
<script>
import {Message} from "element-ui";

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor  , Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

export default {
  name:'AddTopic',
  data(){
    return{
      editorOption:{
        placeholder: "请在这里输入",
        modules:{
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
          },
          toolbar:{
            container:[
              ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'],     //引用，代码块
              [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
              [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
              [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
              [{ 'direction': 'rtl' }],             // 文本方向
              [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
              [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
              [{ 'font': [] }],     //字体
              [{ 'align': [] }],    //对齐方式
              ['clean'],    //清除字体样式
              ['image']    //上传图片、上传视频
            ],
            handlers: {
              'image': function (value) {
                if (value) {
                  document.querySelector('.ivu-upload .ivu-btn').click()
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      },
    }
  },
  props:{
    hotObj:{},
    cardType:[]
  },
  components:{
    quillEditor
  },
  created() {

  },
  methods:{
    onSubmit() {
      this.postRequestJson("/api/tg/hot/addOrEditHotTopic",this.hotObj).then(resp=>{
        if (resp.data.code === '0') {
          Message.success("操作成功")
          this.$emit("chageData",false)
        }
      })
    },
    cance() {
      this.$emit("chageData",false)
    },

    handlePicSuccess(res) {
      if(res.code ==='0') {
        this.hotObj.pic = res.data
        Message.info("上传成功")
      }else {
        Message.error("上传失败")
      }

    },
    handleAvatarSuccess(res) {
      let quill = this.$refs.QuillEditor.quill
      if(res.code ==='0') {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data)
        // 调整光标到最后
        quill.setSelection(length + 1)
      }else {
        Message.error("上传失败")
      }

    },
  }

}
</script>
<style>
.quill-editor{
  width: 800px;
}
.ql-editor {
  height: 400px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
.ivu-upload {
  display: none;
}
  .avatar{
    width: 120px;
    height: 80px;
  }
</style>